<template>
    <drop-wrap :data="data" :index="index"  :element="element">
    <el-tabs :id="element.cid" v-if="element && element.key" :key="element.key" v-model="element.options.defaultValue" @tab-click="handleClick">
      <el-tab-pane v-for="(col, colIndex) in element.columns"   :key="colIndex" :label="col.label" :name="col.name">
        <draggable v-model="col.list" :no-transition-on-drag="true" v-bind="{group:'site', ghostClass: 'ghost',animation: 200, handle: '.mover'}" @add="handleWidgetColAdd($event, element, colIndex)">
          <transition-group name="fade"  v-drop-blank  tag="div" class="widget-col-list" :style="style">
            <widget v-for="(el, i) in col.list" :element="el" :index="i" :key="el.key || Math.random() * 5" :data.sync="col.list"></widget>
          </transition-group>
        </draggable>
      </el-tab-pane>
    </el-tabs>
    </drop-wrap>
</template>

<script>
  import clone from 'clone'
  import Draggable from 'vuedraggable'
  export default {
    data () {
      return {
        activeName: 'second',
      }
    },
    computed: {
      store () {
        return this.element.getRoot();
      },
      style () {
        let boxModel = {}
        Object.entries(this.element.boxModelStyle).map((item) => {
          boxModel[item[0]] = item[1] + 'px'
        })
        return {
          ...boxModel
        }
      }
    },
    props: ["element","data","index"],
    components: { Draggable },
    methods: {
      handleClick (tab, event) {
        console.log(tab, event);
      },
      handleSelectWidget (el) {
        this.store.eventCenter.fire('current', el)
      },
      handleWidgetColAdd ($event, row, colIndex) {
        console.log('coladd', $event, row, colIndex)
        const newIndex = $event.newIndex
        const oldIndex = $event.oldIndex
        const item = $event.item

        // 防止布局元素的嵌套拖拽
        if (item.className.indexOf('data-grid') >= 0) {
          // 如果是列表中拖拽的元素需要还原到原来位置
          item.tagName === 'DIV' && this.widgetForm.list.splice(oldIndex, 0, row.columns[colIndex].list[newIndex])
          row.columns[colIndex].list.splice(newIndex, 1)
          return false
        }
        if (row.columns[colIndex].list[newIndex].key) {
          this.store.delComponentMap(row.columns[colIndex].list[newIndex])
        }
        this.$set(row.columns[colIndex].list, newIndex,this.store.generateComponent({
          ...clone(row.columns[colIndex].list[newIndex]),
          fullPath:row.fullPath,
        }))
        this.store.current = row.columns[colIndex].list[newIndex]
        this.$handleStack.push(clone(this.store.root))
      },
    }
  }
</script>

<style  scoped>
.el-tabs {
  width: calc(100% - 30px);
  margin: 0 15px;
}
.el-tab-pane {
  min-height: 150px !important;
}

.widget-col-list {
  min-height: 150px;
}
</style>